<template>
  <div class="ticket-purchase">
    <!-- 头部 -->
    <el-header class="header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>门票购买</el-breadcrumb-item>
      </el-breadcrumb>
    </el-header>
    <!-- 主体内容 -->
    <el-main class="main">
      <!-- 景区信息 -->
      <el-card class="scenic-card">
        <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.QTNPdEdaOiaKGgeRZu0HQwHaFj?w=221&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="景区图片">
        <div class="scenic-info">
          <h2>北京环球度假区</h2>
          <p>3.4万条评价</p>
          <p>看热门IP，玩精彩项目</p>
        </div>
      </el-card>
      <!-- 日期选择 -->
      <el-card class="date-card">
        <h3>日期选择</h3>
        <el-row type="flex" justify="space-around">
          <el-col :span="6" v-for="(date, index) in dates" :key="index">
            <el-button :type="date.isSelected ? 'primary' : ''" @click="selectDate(index)">
              {{ date.label }}
              <br>
              <span>¥500</span>
            </el-button>
          </el-col>
        </el-row>
      </el-card>
      <!-- 实名认证 -->
      <el-card class="auth-card">
        <h3>实名认证</h3>
        <el-button type="text">购票须知</el-button>
      </el-card>
      <!-- 门票场次 -->
      <el-card class="session-card">
        <h3>门票场次</h3>
        <el-row type="flex" justify="space-around">
          <el-col :span="6" v-for="(session, index) in sessions" :key="index">
            <el-card class="session-item">
              <p>{{ session.time }}</p>
              <p>余{{ session.remaining }}</p>
            </el-card>
          </el-col>
        </el-row>
      </el-card>
      <!-- 游客信息 -->
      <el-card class="visitor-card">
        <h3>游客信息</h3>
        <p>添加了 2 位出行人</p>
        <el-table :data="visitors">
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="idCard" label="身份证号"></el-table-column>
          <el-table-column prop="phone" label="手机号"></el-table-column>
        </el-table>
      </el-card>
      <!-- 购票数量 -->
      <el-card class="quantity-card">
        <h3>购票数量</h3>
        <el-input-number v-model="ticketQuantity" :min="1" :max="10"></el-input-number>
      </el-card>
      <!-- 总价和提交订单 -->
      <el-card class="total-card">
        <p>共{{ ticketQuantity }}张门票，合计：¥{{ ticketQuantity * 500 }}</p>
        <el-button type="primary" @click="submitOrder">提交订单</el-button>
      </el-card>
    </el-main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dates: [
        { label: '今天 9-19', isSelected: true },
        { label: '明天 9-20' },
        { label: '后天 9-21' },
        { label: '指定日期' }
      ],
      sessions: [
        { time: '08:00 - 10:00', remaining: 3000 },
        { time: '10:00 - 12:00', remaining: 3000 },
        { time: '13:00 - 15:00', remaining: 3000 },
        { time: '16:00 - 17:00', remaining: 3000 },
        { time: '18:00 - 19:00', remaining: 3000 },
        { time: '20:00 - 21:00', remaining: 3000 }
      ],
      visitors: [
        { name: '李天霸', idCard: '3432432342********8888', phone: '151******8888' },
        { name: '游客 2', idCard: '3432432342********9999', phone: '151******8888' }
      ],
      ticketQuantity: 2
    };
  },
  methods: {
    selectDate(index) {
      this.dates.forEach((date, i) => {
        date.isSelected = i === index;
      });
    },
    submitOrder() {
      // 创建一个 ticket 对象，包含必要的信息
      const selectedDate = this.dates.find(date => date.isSelected).label;
      const ticket = {
        name: '北京环球度假区',
        price: 500,
        quantity: this.ticketQuantity,
        selectedDate: selectedDate,
        visitors: this.visitors
      };

      // 导航到 payment 页面，并传递 ticket 对象作为参数
      this.$router.push({ name: 'payment', params: { ticket: ticket } });
    }
  }
};
</script>

<style scoped>
.ticket-purchase {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  background-color: #337ecc;
  color: white;
  text-align: center;
  line-height: 60px;
}

.main {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.scenic-card {
  display: flex;
  align-items: center;
  gap: 20px;
}

.scenic-card img {
  width: 200px;
  height: 150px;
  object-fit: cover;
}

.date-card, .auth-card, .session-card, .visitor-card, .quantity-card, .total-card {
  padding: 20px;
}

.session-item {
  text-align: center;
  padding: 10px;
}

.el-button--primary {
  margin-right: 10px;
}

.el-button + .el-button {
  margin-left: 10px;
}
</style>
